---
layout: loop-guides
title: Bootstrap Guides
description: These Bootstrap guides and Bootstrap tutorials can help learn more about using Bootstrap 4 and other tools to create better web based projects!
permalink: /guides/

meta-title: Learn Bootstrap 4 - Bootstrap Guides and Tutorials
meta-title: Learn more about how to code and design websites with Bootstrap 4 - beginner, intermediate, and advanced guides covering topics related to design, code, and development

type: guide

pagination:
  enabled: true
  collection: guides
  paginate_path: /guides/page:num/
  per_page: 5
---

<section class="after-loop">
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
        <a href="/themes/" class="after-loop-item card border-0 card-themes shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Themes</h4>
            <p class="w-75">Fully designed and ready to modify and publish!</p>
            <i class="fal fa-paint-brush-alt"></i>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
        <a href="/templates/" class="after-loop-item card border-0 card-templates shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Templates</h4>
            <p class="w-75">Unstyled layouts to help you get started!</p>
            <i class="fal fa-pencil-ruler"></i>
          </div>
        </a>
      </div>
      <div class="col-lg-4 col-md-8 mb-5 mb-lg-0 mx-auto">
        <a href="/snippets/" class="after-loop-item card border-0 card-snippets shadow-lg">
          <div class="card-body d-flex align-items-end flex-column text-right">
            <h4>Snippets</h4>
            <p class="w-75">Code snippets ready to copy and paste!</p>
            <i class="fal fa-code"></i>
          </div>
        </a>
      </div>
    </div>
  </div>
</section>
